<template>
  <MyCard class="container">
    <template #title>
      <div class="title_div">
        <p>我的班级</p>
        <el-input style="width: 25em" placeholder="搜索班级" :prefix-icon="Search"
                  @click="state.showSearch = true" @focus="state.showSearch = true"></el-input>
        <div id="title_left">
          <el-button type="primary" style="width: 6em" @click="state.showCreateClass = true">创建班级</el-button>
          <el-button type="primary" style="width: 6em" @click="state.showJoinClass=true">加入班级</el-button>
        </div>
      </div>
    </template>
    <el-skeleton v-if="!state.showAll" animated></el-skeleton>
    <div v-if="state.myClassList.length == 0 && state.showAll" class="notice_text">没有加入的班级哦</div>
    <ClassListItem v-for="(item,index) in state.myClassList" :mclass="item"
                   :btn-function="showClassInfoFunction(index)">查看
    </ClassListItem>
  </MyCard>

  <el-dialog width="35em" title="创建班级" v-model="state.showCreateClass">
    <AddClass @onClose="dialogClose" @error="dialogError"></AddClass>
  </el-dialog>

  <el-dialog width="25em" style="height: auto;min-height: 15em" title="错误" v-model="state.showError">
    {{ state.error }}
  </el-dialog>

  <el-dialog width="35em" title="加入班级" v-model="state.showJoinClass">
    <JoinClassDialogContent @error="joinClassEmit" @success="joinClassEmit"></JoinClassDialogContent>
  </el-dialog>

  <el-dialog width="35em" title="搜索班级" v-model="state.showSearch">
    <SearchClassDialogContent></SearchClassDialogContent>
  </el-dialog>

  <el-dialog title="提示" v-model="state.noticeDialog.show">
    {{ state.noticeDialog.msg }}
    <el-button type="primary"
               @click="state.noticeDialog.confirmFn">
      确定
    </el-button>
    <el-button @click="state.noticeDialog.show=false">取消</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from 'vue'
import {Class, MyDialog, User} from '../../../types/mytypes';
import {ClassRequest} from '../../../request/MyRequset';
import {PageStore, UserStore} from '../../../store/store';
import router from "../../../router/router";
import MyCard from "../../../components/MyCard.vue";
import AddClass from "./AddClass.vue";
import ClassListItem from "../../../components/ClassListItem.vue";
import {Search} from "@element-plus/icons-vue";
import JoinClassDialogContent from "../../../components/MyClassComponents/JoinClassDialogContent.vue";
import SearchClassDialogContent from "../../../components/MyClassComponents/SearchClassDialogContent.vue";

const state = reactive({
  user: {} as User,
  collapseName: '0',
  myClassList: [] as Class[],
  manageClassList: [] as Class[],
  showAll: false,
  showCreateClass: false,
  showError: false,
  error: "",
  showJoinClass: false,
  joinClassInput: "",
  showSearch: false,
  noticeDialog: {} as MyDialog
})
const joinClassEmit = (arg: MyDialog) => {
  state.noticeDialog = arg;
  state.noticeDialog.confirmFn = async () => {
    if (state.noticeDialog.suc) {
      await initData();
    }
    state.showJoinClass = false
    state.noticeDialog.show = false
  }
}

const initData = async () => {
  //获取当前登录的user
  state.user = UserStore.getUser();
  //获取user的全部班级
  let classRes = await ClassRequest.userGetAll(state.user.id)
  state.myClassList = classRes.data;
  //获取user管理的班级
  let manageRes = await ClassRequest.userGetManageAll(state.user.id);
  state.manageClassList = manageRes.data;
  state.showAll = true;
}
onMounted(async () => {
  await initData();
})
const showClassInfoFunction = (index: number) => {
  return () => {
    PageStore.setNowClass(state.myClassList[index]);
    router.push({name: "myClassInfo"});
  }
}
const dialogClose = async () => {
  state.showCreateClass = false;
  //添加班级后更新页面数据
  await initData();
}
const dialogError = (error: string) => {
  state.error = error
  state.showError = true
}
</script>

<style scoped lang="scss">

.container {
  width: 100%;
  height: 100%;
  background-color: white;
  box-sizing: border-box;
  //border-radius: 1em;
  padding: 10px;

  overflow: hidden;

  .title_div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #ccc solid;
    padding: 0 10px;

    p {
      font-weight: bold;
      font-size: 1.1em;
    }
  }

  .my_class_card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;

    .notice_text {
      margin-left: 1em;
    }

    .class_card_title {
      border-bottom: 1px #ccc solid;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
}


</style>